import React, { useEffect } from 'react';
import { Button, Checkbox, Form, Input, Col, Row, message } from 'antd';
import { Login, Logon } from "@/request/user"
import CryptoJS from 'crypto-js'
import type { FormInstance } from 'antd/es/form';
import { useNavigate } from 'react-router-dom'
export default function LoginOrLogon() {
	message.config({
		top: 0,
		duration: 1,
		maxCount: 1
	})
	const navigate = useNavigate()
	const formRef = React.useRef<FormInstance>(null)
	const getInitialValues = () => {
		const info = localStorage.getItem('formData')
		if (info) {
			const InitialValues = JSON.parse(aesDecrypt(info))
			formRef.current?.setFieldsValue(InitialValues)
		}
	}
	useEffect(() => {
		getInitialValues()
	}, [])
	const aesDecrypt = (result: any) => {
		const key = CryptoJS.enc.Latin1.parse('emhpcnVpemh3eQ')
		const iv = key
		// 解密逻辑
		const decryptd = CryptoJS.AES.decrypt(result, key, {
			iv: iv,
			mode: CryptoJS.mode.CFB,
			padding: CryptoJS.pad.NoPadding
		})

		return decryptd.toString(CryptoJS.enc.Utf8)
	}
	const aesEncrypt = (src: string) => {
		const key = CryptoJS.enc.Utf8.parse('emhpcnVpemh3eQ')
		// 加密
		const encrypted = CryptoJS.AES.encrypt(src, key, {
			iv: key,
			mode: CryptoJS.mode.CFB,
			padding: CryptoJS.pad.NoPadding
		})
		return encrypted.toString()
	}
	const onFinish = (type: number) => {
		return () => {
			formRef.current?.validateFields().then(async values => {
				if (type === 0) {
					console.log(values)
					if (values.remember) {
						localStorage.setItem('formData', aesEncrypt(JSON.stringify(values)))
					} else {
						localStorage.removeItem('formData')
					}
					const res: any = await Login(values)
					if (res.status == 200) {
						localStorage.setItem('token', res.token)
						localStorage.setItem('userinfo', JSON.stringify(res.data))
						message.success('登录成功')
						navigate('/')
					}
				} else {
					const res: any = await Logon(values)
					if (res.status == 200) {
						message.success('注册成功')
					}
				}
			}).catch(err => console.log(err))
		}

	};
	return (
		<div style={{ height: '100vh' }}>
			<Row style={{ height: '100%' }} align="middle" justify="center">
				<Col span={8}>
					<Form
						ref={formRef}
						name="basic"
						labelCol={{ span: 8 }}
						wrapperCol={{ span: 16 }}
						style={{ maxWidth: 600 }}
						autoComplete="off"
					>
						<Form.Item
							label="手机号"
							name="account"
							rules={[{ required: true, message: '请输入手机号' }, { pattern: /^1\d{10}$/, message: '手机号格式错误' }]}
						>
							<Input placeholder="请输入手机号" />
						</Form.Item>

						<Form.Item
							label="密码"
							name="password"
							rules={[{ required: true, message: '请输入密码' }]}
						>
							<Input.Password placeholder="请输入密码" />
						</Form.Item>

						<Form.Item name="remember" valuePropName="checked" wrapperCol={{ offset: 8, span: 16 }}>
							<Checkbox>记住密码</Checkbox>
						</Form.Item>
					</Form>

					<Row align="middle" justify="center">
						<Col offset={2}>
							<Button onClick={onFinish(0)} type="primary" htmlType="submit">
								登录
							</Button>
						</Col>
						<Col offset={2}>
							<Button onClick={onFinish(1)} type="primary" htmlType="submit">
								注册
							</Button>
						</Col>
					</Row>
				</Col>
			</Row>
		</div>
	)
}

